<div class="content">
    <div id="example_title">
        <h1>Text Markers</h1>
        If you have some text and what to highlight, you can use the marker utility. It works arround HTML tags.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div id="text" style="font-size: 16px; line-height: 1.6; color: #555">
    <div>
    Belarus,[a] officially the Republic of Belarus,[b] is a landlocked country in Eastern Europe. It is bordered by Russia to the
    east and northeast, Ukraine to the south, Poland to the west, and Lithuania and Latvia to the northwest. Covering an area of
    207,600 square kilometres (80,200 sq mi) and with a <i>population of 9.4 million</i>, Belarus is the thirteenth-largest and the
    twentieth-most populous country in Europe. The country is administratively divided into seven regions. Minsk is the capital
    and largest city.
    </div>
    <br>
    <div>
    Until the 20th century, different states at various times controlled the lands of modern-day Belarus, including Kievan Rus',
    the Principality of Polotsk, the Grand Duchy of Lithuania, the Polish–Lithuanian Commonwealth, and the Russian Empire. In
    the aftermath of the Russian Revolution in 1917, different states arose competing for legitimacy amidst the Civil War,
    ultimately ending in the rise of the Byelorussian SSR, which became a founding constituent republic of the Soviet Union in
    1922. After the Polish-Soviet War, Belarus lost almost half of its territory to Poland. Much of the borders of Belarus took
    their modern shape in 1939, when some lands of the Second Polish Republic were reintegrated into it after the Soviet invasion
    of Poland, and were finalized after World War II.[10][11][12] During World War II, military operations devastated Belarus,
    which lost about a quarter of its population and half of its economic resources.[13] The republic was redeveloped in the
    post-war years. In 1945, the Byelorussian SSR became a founding member of the United Nations, along with the Soviet Union.
    </div>
</div>
<br><br>

<input placeholder="Type string to search..." oninput="search(this.value)" class="w2ui-input" style="width: 200px">
<br><br>

<button class="w2ui-btn" onclick="search(['Belarus', 'republic'])">Mark Country</button>
<button class="w2ui-btn" onclick="search(['the', 'a', 'an'], { wholeWord: true })">Articles (whole word only)</button>
<button class="w2ui-btn" onclick="search()">Clear Markers</button>

<!--CODE-->
<script type="module">
import { w2utils, query } from '__W2UI_PATH__'

window.search = function(text, options = {}) {
    w2utils.marker(query('#text'), text, options)
}
</script>